<template>
  <div class="order-info">
    <div class="order-id line bold">
      <span>{{ $t('packet.订单号') }}：</span>
      <span>{{ order.orderId }}</span>
    </div>
    <div class="line bold" v-if="isDetail">
      {{ $t('packet.订单状态') }}：{{ order.statusStr }}
    </div>
   <p v-if="orderDetail.child_id!=''&&orderDetail.child_id!=0&&orderDetail.child_id!=null">
     <span >操作员：{{ orderDetail.child_name }}</span>
   </p>
   <p v-else>
     <span >操作员：{{ orderDetail.userAccount }}</span>
   </p>
    <div class="line" v-if="isDetail">
      <div class="item">
        {{ $t('packet.制单时间') }}： {{ order.createTime }}
      </div>
      <div class="item" v-show="order.stickerTime">
        {{ $t('packet.贴单时间') }}： {{ order.stickerTime }}
      </div>
      <div class="item" v-show="order.stickerTime">
        {{ $t('packet.取消时间') }}： {{ order.cancelDate }}
      </div>
    </div>
    <div class="line">
      <div class="item">
        {{ $t('packet.SKU（种数）') }}: {{ order.goodsData.length }}
      </div>
      <div class="item">
        {{ $t('packet.商品数量') }}: {{ order.goodsData.reduce((c,v) => c + v.num, 0) }}
      </div>
    </div>
    <div class="line">
      <div class="item">
        {{ $t('packet.贴单单价（元）') }}：{{ order.spStickerPrice }}
      </div>
      <div class="item">
        {{ $t('packet.续件费用（元）') }}：{{ order.totalStickerAppend }}
      </div>
      <div class="item">
        {{ $t('packet.包装服务费（元）') }}：{{ order.packageMaterialPrice }}
      </div>
      <!--<div class="item">-->
      <!--  {{ $t('packet.运费（元）') }}：{{ order.userShippingFee }}-->
      <!--</div>-->
      <div class="item">
        {{ $t('packet.快递加收（元）') }}：{{ order.logisticTypePrice }}
      </div>
    </div>
    <div class="line bold mark">
      {{ $t('packet.预计总费用（元）') }}：{{ order.totalFee }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderDetail:{
      type: Object,
      default() {
        return {};
      },
    },
    order: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
    isDetail: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {}
}
</script>

<style scoped lang="less">
.order-info{
  background: #F2F2F2;
  font-size: 14px;
  padding: 10px 14px;
  line-height: 20px;
  .line{
    display: flex;
    padding: 3px 0;
    &.bold{
      font-weight: bold;
    }
    &.mark{
      color: #FC541E;
    }
    .item{
      margin-right: 46px;
      width: 220px;
    }
  }

}
</style>
